<template>
  <view class="hot-goods-item" :class="{ border: border }" @click="hotGoodsClick">
    <b-image class-name="img" :width="254" :height="254" :src="goods.commodityImgUrl" mode="aspectFill" />
    <view class="sub-item right-part">
      <view class="name">{{ goods.commodityName }}</view>
      <view class="share-buy">{{ goods.shareNum | formatNumber }}名用户分享后有成交！</view>
      <view v-if="goods.originalPrice" class="market-price">{{ goods.originalPrice | formatMoney }}</view>
      <view class="bottom-line">
        <view class="left">
          <view class="price-title">爆品价 </view>
          <view class="price">{{ goods.lanMiPrice | formatMoney }}</view>
        </view>
        <view class="btn">
          <!-- <template v-if="userInfo.current_member_card_type !== 0 && userInfo.current_member_card_type !== 1 && goods[commissionKeys[userInfo.current_member_card_type || 0]] > 0">立即抢购￥{{ goods[commissionKeys[userInfo.current_member_card_type || 0]] | formatMoney }}</template>
          <template v-else>立即抢购</template> -->
          立即抢购
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { mapState } from 'vuex'
import { formatUrlParam } from '@/utils/tools'
export default {
  name: 'HotGoodsItem',
  props: {
    goods: {
      type: Object,
      default() {
        return {}
      }
    },
    crushId: {
      type: String,
      default: ''
    },
    border: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      commissionKeys: ['regionCommission', '', 'regionCommission', 'directorCommission']
    }
  },
  computed: {
    ...mapState([
      'userInfo'
    ])
  },
  methods: {
    hotGoodsClick() {
      this.addShareRecord()
      this.$navigateTo(formatUrlParam('/pagesDetail/commodity/index', {
        activity_id: this.crushId,
        from_type: this.goods.fromType,
        id: this.goods.commodityId,
        // goods_id: this.goods.commodityId,
        goods_type: this.goods.goodsType,
        pack_type: this.goods.packType
      }))
    },
    // 今日热卖点击分享收集
    async addShareRecord() {
      this.$trackSDK.track('bx.home.list.click', '', {
        title: '今日热卖列表',
        goods_id: this.goods.commodityId,
        goods_name: this.goods.commodityName
      })
      await this.$api.homeApi.addHotBuyShare({
        userId: this.userInfo.uid || '',
        shareCommodityName: this.goods.commodityName,
        shareCommodityId: this.goods.commodityId,
        commodityImgUrl: this.goods.commodityImgUrl,
        crushId: this.crushId,
        goodsType: this.goods.goodsType,
        showLoading: false
      })
    }
  }
}
</script>
<style lang="scss">
.hot-goods-item{
  @include flex;
  margin-top: 20rpx;
  padding-bottom: 20rpx;
  .img{
    width: 254rpx;
    height: 254rpx;
  }
  .sub-item{
    @include sub-item;
    margin-left: 20rpx;
  }
  .right-part{
    @include flex(column);
    font-size: 24rpx;

    .name{
      @include text-ellipsis-line;
      color: #333;
      font-size: 28rpx;
      line-height: 36rpx;
      max-height: 72rpx;
    }

    .share-buy{
      @include sub-item(1, column);
      color: #FF0000;
      padding-top: 20rpx;
    }
    .market-price{
      color: #999;
      font-size: 26rpx;
      text-decoration: line-through;

      &::before{
        content: '原价￥';
        color: #999;
      }
    }
    .price{
      color: #000;
      font-size: 36rpx;
      font-weight: 400;

      &::before{
        content: '￥';
        font-weight: normal;
        font-size: 20rpx;
      }
    }
    .bottom-line{
      @include flex;

      .left{
        @include sub-item;
        @include text-ellipsis;
        &>view{
          display: inline-block;
        }
      }
      .price-title{
        color: #000;
        font-weight: 500;
      }

      .btn{
        width: 190rpx;
        color: #fff;
        font-size: 26rpx;
        text-align: center;
        line-height: 54rpx;
        background: #000;
      }
    }
  }

  &.border{
    border-bottom: 1rpx solid #eee;
  }
}
</style>
